<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./../../layui/css/layui.css">
    <title>模型样式编辑</title>
    <style>
        .l_title{
            font-size: 14px;
            color: #868686;
            font-weight: bold;
            text-indent: 2px;
            text-align: left !important;
            padding: 9px 0 !important;
        }
        .none{
            display: none;
        }
        /*  */
        .hidden{
            display: none;
        }
        .m_c_upload{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -36px;
            margin-top: -10px;
        }
        .screenshot{
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .colorChoose{
            float: left !important;
            width: 120px;
        }
        .layui-form-select dl dd.layui-this{
            background-color: #00aeff !important;
        }
        .layui-form-radioed>i, .layui-form-radio>i:hover {
            color: #00aeff !important;
        }
        .layui-form-item .layui-form-label{
            white-space:unset!important;
        }
    </style>
</head>
<body>
    <div class="layui-form"  lay-filter="sIfram">
        <div class="layui-form-item">
            <label class="layui-form-label l_title">样式类型</label>
            <div class="layui-input-block">
                <select name="styletype" id="allPoint" lay-filter="allPoint">
                    <option value="model">基础模型</option>
                    <option value="pointcloudmodel">点云模型</option>
                </select> 
            </div>
        </div>
        <!-- 基础模型 -->
        <div class="basisPoints none">
            <div class="layui-form-item">
                <label class="layui-form-label l_title">选择矢量服务</label>
                <div class="layui-input-block">
                    <select name="layerName" lay-filter="demo1">
                        <option value="13">21</option>
                        <option value="231">32</option>
                        <option value="333">32</option>
                        <option value="32">32</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">显示级别</label>
                <div class="layui-input-block">
                    <div style="float: left;width: 32%;margin-right: 2%;">
                        <input type="text" name="level_min"  placeholder="0" autocomplete="off" class="layui-input">
                    </div>
                    <div style="float: left; width: 32%;margin-right: 2%;">
                        <input type="text" name="level_max"  placeholder="21" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">模型离地高度</label>
                <div class="layui-input-block">
                    <input type="text" name="groundheight"  placeholder="请输入模型离地高度" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label l_title">是否投射接收阴影</label>
                <div class="layui-input-block">
                    <select name="shadows" lay-verify="">
                        <option value="不投射或接收阴影">不投射或接收阴影</option>
                        <option value="投射或接收阴影">投射或接收阴影</option>
                        <option value="仅投射">仅投射</option>
                        <option value="仅接收阴影">仅接收阴影</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">屏幕空间误差密度</label>
                <div class="layui-input-block">
                    <input type="text" name="dynamicScreenSpaceErrorDensity"  placeholder="0.00278" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">动态屏幕空间因子</label>
                <div class="layui-input-block">
                    <input type="text" name="dynamicScreenSpaceErrorFactor"  placeholder="4.0" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">瓷砖组高度的比率</label>
                <div class="layui-input-block">
                    <input type="text" name="dynamicScreenSpaceErrorHeightFalloff"  placeholder="0.25" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">太阳的天顶高度</label>
                <div class="layui-input-block">
                    <input type="text" name="luminanceAtZenith"  placeholder="0.5" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">基于图像的光照坐标</label>
                <div class="layui-input-block">
                        <div style="float: left;width: 32%;margin-right: 2%;">
                            <input type="text" name="imageBasedLightingFactor_x"  placeholder="X" autocomplete="off" class="layui-input">
                        </div>
                        <div style="float: left; width: 32%;margin-right: 2%;">
                            <input type="text" name="imageBasedLightingFactor_y"  placeholder="Y" autocomplete="off" class="layui-input">
                        </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">是否会被分类</label>
                <div class="layui-input-block">
                    <select name="classificationType" lay-verify="">
                        <option value="只有地形会被分类">只有地形会被分类</option>
                        <option value="只有3D瓷砖会被分类">只有3D瓷砖会被分类</option>
                        <option value="两者都会被分类">两者都会被分类</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">颜色</label>
                <div class="layui-input-block">
                    <input name="material" type="text" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="pointColor-input">
                    <div style="float: left;">
                        <div id="pointColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 点云模型 -->
        <div class="textPoint none">
            <div class="layui-form-item">
                <label class="layui-form-label l_title">选择矢量服务</label>
                <div class="layui-input-block">
                    <select name="layerName" lay-filter="demo1">
                        <option value="21">21</option>
                        <option value="32">32</option>
                        <option value="32">32</option>
                        <option value="32">32</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">显示级别</label>
                <div class="layui-input-block">
                    <div style="float: left;width: 32%;margin-right: 2%;">
                        <input type="text" name="level_min"  placeholder="0" autocomplete="off" class="layui-input">
                    </div>
                    <div style="float: left; width: 32%;margin-right: 2%;">
                        <input type="text" name="level_max"  placeholder="21" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">模型离地高度</label>
                <div class="layui-input-block">
                    <input type="text" name="groundheight"  placeholder="请输入模型离地高度" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">是否投射接收阴影</label>
                <div class="layui-input-block">
                    <select name="shadows" lay-verify="">
                        <option value="不投射或接收阴影">不投射或接收阴影</option>
                        <option value="投射或接收阴影">投射或接收阴影</option>
                        <option value="仅投射">仅投射</option>
                        <option value="仅接收阴影">仅接收阴影</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">屏幕空间误差密度</label>
                <div class="layui-input-block">
                    <input type="text" name="dynamicScreenSpaceErrorDensity"  placeholder="0.00278" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">动态屏幕空间因子</label>
                <div class="layui-input-block">
                    <input type="text" name="dynamicScreenSpaceErrorFactor"  placeholder="4.0" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">瓷砖组高度的比率</label>
                <div class="layui-input-block">
                    <input type="text" name="dynamicScreenSpaceErrorHeightFalloff"  placeholder="0.25" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">太阳的天顶高度</label>
                <div class="layui-input-block">
                    <input type="text" name="luminanceAtZenith"  placeholder="0.5" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">基于图像的光照坐标</label>
                <div class="layui-input-block">
                        <div style="float: left;width: 32%;margin-right: 2%;">
                            <input type="text" name="imageBasedLightingFactor_x"  placeholder="X" autocomplete="off" class="layui-input">
                        </div>
                        <div style="float: left; width: 32%;margin-right: 2%;">
                            <input type="text" name="imageBasedLightingFactor_y"  placeholder="Y" autocomplete="off" class="layui-input">
                        </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">是否会被分类</label>
                <div class="layui-input-block">
                    <select name="classificationType" lay-verify="">
                        <option value="只有地形会被分类">只有地形会被分类</option>
                        <option value="只有3D瓷砖会被分类">只有3D瓷砖会被分类</option>
                        <option value="两者都会被分类">两者都会被分类</option>
                    </select> 
                </div>
            </div>          
            <div class="layui-form-item">
                <label class="layui-form-label l_title">颜色</label>
                <div class="layui-input-block">
                    <input name="colors" type="text" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="tpFillColor-input">
                    <div style="float: left;">
                        <div id="tpFillColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">最大屏幕空间误差</label>
                <div class="layui-input-block">
                    <input type="text" name="maximumscreenspaceerror"  placeholder="请输入最大屏幕空间误差" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">最大阴影衰减量</label>
                <div class="layui-input-block">
                    <input type="text" name="maximumattenuation"  placeholder="请输入最大阴影衰减量" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">基础阴影分辨率</label>
                <div class="layui-input-block">
                    <input type="text" name="baseresolution"  placeholder="请输入基础阴影分辨率" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">阴影几何误差范围</label>
                <div class="layui-input-block">
                    <input type="text" name="geometricerrorscale"  placeholder="请输入阴影几何误差范围" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">光照强度</label>
                <div class="layui-input-block">
                    <input type="text" name="eyeDomeLightingStrength"  placeholder="请输入光照强度" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">光照范围</label>
                <div class="layui-input-block">
                    <input type="text" name="eyeDomeLightingRadius"  placeholder="请输入光照范围" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">开启阴影衰减</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="attenuation" lay-skin="switch" lay-filter="switchTest" lay-text="显示|不显示">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">开启穹顶照明</label>
                <div class="layui-input-block">
                  <input type="checkbox"  name="eyedomelighting" lay-skin="switch" lay-filter="switchTest" lay-text="显示|不显示">
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./../../JS/jquery-2.0.3.js"></script>
<script src="./../../node_modules/iframeResizer.contentWindow.js"></script>
<script src="./../../layui/layui.js"></script>
<script>
    var form = null;
     $(function () {
        layui.use(['element','form','colorpicker'], function () {
            var $ = layui.$,
                element = layui.element,
                colorpicker = layui.colorpicker;
            form = layui.form;
            // 是否默认基础模型
            var pv  = $('#allPoint').val();
            if(pv == 'model'){
                $('.basisPoints').removeClass('none')
            }
            //给表单赋值
            if (parent.sIframForm  && parent.sIframForm.d_type === 'model') {
                //样式类型
                if(parent.sIframForm.styletype === '点云模型') {
                    $('.basisPoints').addClass('none')
                    $('.textPoint').removeClass('none')
                }
                var obj = JSON.parse(JSON.stringify(parent.sIframForm))
                form.val('sIfram',obj);
            }

            // 监听基础模型、点云模型
            form.on('select(allPoint)', function (data) {
                if(data.value == 'model'){ //基础模型
                    $('.basisPoints').removeClass('none')
                    $('.textPoint').addClass('none')
                }else if(data.value == 'pointcloudmodel'){ //点云模型
                    $('.basisPoints').addClass('none')
                    $('.textPoint').removeClass('none')
                }
            });
            // 基础模型 颜色选择器
            colorpicker.render({
                elem: '#pointColor'
                ,color: (parent.sIframForm && parent.sIframForm.material) || '#1c97f5'
                ,done: function(color){
                     $('#pointColor-input').val(color);
                }
            });

            // 点云模型 颜色
            colorpicker.render({
                elem: '#tpFillColor'
                ,color: (parent.sIframForm && parent.sIframForm.colors) || '#1c97f5'
                ,done: function(color){
                $('#tpFillColor-input').val(color);
                }
            });
        });
    })


</script>
</html>